<template>
  <Layout :class="'bg-white p-2'">
    <!-- 表格二 -->
    <h4 :class="' w-100 m-2'">未回访统计</h4>
    <Row>
      <Col span="3">
        <Date-picker
          format="yyyy-MM-dd HH:mm:ss"
          :class="' w-100 m-2'"
          type="datetime"
          @on-change="table2StartTimechange"
          placeholder="统计开始时间"
        ></Date-picker>
      </Col>
      <div class="to">~</div>
      <Col span="3">
        <Date-picker
          format="yyyy-MM-dd HH:mm:ss"
          :class="'w-100 m-2'"
          type="datetime"
          @on-change="table2EndTimechange"
          placeholder="统计结束时间"
        >
        </Date-picker>
      </Col>
      <Col span="2">
        <Button
          :class="'m-2 w-75'"
          type="primary"
          shape="circle"
          @click="searchBackview"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <Table :columns="table2.columns" :data="table2.data" border :class="'m-1'">
      <template slot-scope="{ row, index }" slot="studentname">
        <Row>
          <Col>
            <a @click="showPersonDetail(row)">{{ row.studentname }}</a>
          </Col>
        </Row>
      </template>
    </Table>
    <Page
      class="pages"
      :class="'m-2 text-right'"
      :page-size="table2.size"
      @on-change="pageSearch"
      :total="table2.totalPage"
      :current="table2.page"
      show-sizer
      @on-page-size-change="changeSize"
    />
    <hr />
    <!-- 表格一 v-model="statisticStartTime"-->
    <Row>
      <Col span="3">
        <Date-picker
          :class="' w-100 m-2'"
          type="datetime"
          @on-change="statisticStartTimechange"
          placeholder="统计开始时间"
        ></Date-picker>
      </Col>
      <div class="to">~</div>
      <Col span="3">
        <Date-picker
          format="yyyy-MM-dd HH:mm:ss"
          :class="'w-100 m-2'"
          type="datetime"
          @on-change="statisticEndTimechange"
          :value="statisticEndTime"
          placeholder="统计结束时间"
        >
        </Date-picker>
      </Col>
      <Col span="2">
        <Button
          :class="'m-2 w-75'"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <Table border :class="'m-1'" :columns="table1.columns" :data="table1.data">
    </Table>
    <Page
      class="pages"
      :class="'m-2 text-right'"
      :page-size="table1.size"
      @on-change="pageSearch"
      :total="table1.totalPage"
      :current="table1.page"
      show-sizer
      @on-page-size-change="changeSize"
    />
    <hr />
    <!-- 第3行  表格 : 今日未回访-->
    <h4 :class="' w-100 m-2'">今日未回访</h4>
    <Row>
      <Col span="3">
        <Date-picker
          :class="' w-100 m-2'"
          type="datetime"
          @on-change="unHandleBackviewSearchStartTimeChange"
          :value="unHandleBackviewSearchStartTime"
          placeholder="统计开始时间"
        ></Date-picker>
      </Col>
      <div class="to">~</div>
      <Col span="3">
        <Date-picker
          format="yyyy-MM-dd HH:mm:ss"
          :class="'w-100 m-2'"
          type="datetime"
          @on-change="unHandleBackviewSearchEndTimeChange"
          :value="unHandleBackviewSearchEndTime"
          placeholder="统计结束时间"
        >
        </Date-picker>
      </Col>
      <Col span="2">
        <Button
          disabled
          :class="'m-2 w-75'"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>

    <Table
      border
      :class="'m-1'"
      :columns="tableUnHandleBackview.columns"
      :data="tableUnHandleBackview.data"
    >
    </Table>

    <Page
      class="pages"
      :class="'m-2 text-right'"
      :page-size="tableUnHandleBackview.size"
      @on-change="unHandleBackviewPageSearch"
      :total="tableUnHandleBackview.totalPage"
      :current="tableUnHandleBackview.page"
      show-sizer
      @on-page-size-change="unHandleBackviewChangeSize"
    />

    <!-- 第4行  表格 : 今日未到访-->
    <Row>
      <Col span="3">
        <Date-picker
          :class="' w-100 m-2'"
          type="datetime"
          @on-change="unHandleInterviewSearchStartTimeChange"
          :value="unHandleInterviewSearchStartTime"
          placeholder="统计开始时间"
        ></Date-picker>
      </Col>
      <div class="to">~</div>
      <Col span="3">
        <Date-picker
          format="yyyy-MM-dd HH:mm:ss"
          :class="'w-100 m-2'"
          type="datetime"
          @on-change="unHandleInterviewSearchEndTimeChange"
          :value="unHandleInterviewSearchEndTime"
          placeholder="统计结束时间"
        >
        </Date-picker>
      </Col>
      <Col span="2">
        <Button
          disabled
          :class="'m-2 w-75'"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <hr />
    <!--今日未到访-->
    <h4 :class="' w-100 m-2'">今日未到访</h4>
    <Table
      border
      :class="'m-1'"
      :columns="tableUnHandleInterview.columns"
      :data="tableUnHandleInterview.data"
    >
    </Table>

    <Page
      class="pages"
      :class="'m-2 text-right'"
      :page-size="tableUnHandleInterview.size"
      @on-change="unHandleInterviewPageSearch"
      :total="tableUnHandleInterview.totalPage"
      :current="tableUnHandleInterview.page"
      show-sizer
      @on-page-size-change="unHandleInterviewChangeSize"
    />
  </Layout>
</template>

<script>
export default {
  data() {
    let self = this
    return {
      statisticStartTime: '',
      statisticEndTime: '',
      table1: {
        page: 1,
        size: 10,
        totalCount: 0,
        totalPage: 0,
        columns: [
          {
            title: '#',
            width: 80,
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index + (self.table1.page - 1) * self.table1.size + 1
              )
            },
          },
          {
            title: '姓名',
            key: 'nickname',
          },
          {
            title: '线索总量',
            key: 'resourcecount',
          },
          {
            title: '已约访量',
            key: 'reservationinterview',
          },
          {
            title: '已到访量',
            key: 'interviewcount',
          },
          {
            title: '有效到访',
            key: 'validinterview',
          },
          {
            title: '已试听',
            key: 'trycount',
          },
          {
            title: '已报名',
            key: 'baomingcount',
          },
          {
            title: '回访量',
            key: 'backviewcount',
          },
        ],
        data: [],
      },
      table2StartTime: '',
      table2EndTime: '',
      table2: {
        page: 1,
        size: 10,
        totalCount: 0,
        totalPage: 0,
        columns: [
          {
            title: '#',
            width: 80,
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index + (self.table2.page - 1) * self.table2.size + 1
              )
            },
          },
          {
            title: '姓名',
            slot: 'studentname',
          },
          {
            title: '回访人',
            key: 'autor',
          },
          {
            title: '回访日期',
            key: 'datetime',
          },
          {
            title: '回访方式',
            key: 'method',
          },
          {
            title: '回访描述',
            key: 'des',
          },
        ],
        data: [],
      },
      unHandleBackviewSearchStartTime: '',
      unHandleBackviewSearchEndTime: '',
      tableUnHandleBackview: {
        page: 1,
        size: 10,
        totalCount: 0,
        totalPage: 0,
        columns: [
          {
            title: '#',
            width: 80,
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index + (self.table2.page - 1) * self.table2.size + 1
              )
            },
          },
          {
            title: '学生姓名',
            key: 'name',
          },
          {
            title: '预约回访日期',
            key: 'datetime',
          },
          {
            title: '跟进人',
            key: 'autor',
          },
          {
            title: '阶段',
            key: 'stageId',
          },
        ],
        data: [],
      },
      unHandleInterviewSearchStartTime: '',
      unHandleInterviewSearchEndTime: '',
      tableUnHandleInterview: {
        page: 1,
        size: 10,
        totalPage: 0,
        totalPage: 0,
        columns: [
          {
            title: '#',
            width: 80,
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index + (self.table2.page - 1) * self.table2.size + 1
              )
            },
          },
          {
            title: '学生姓名',
            key: 'name',
          },
          {
            title: '预约回访日期',
            key: 'datetime',
          },
          {
            title: '跟进人',
            key: 'autor',
          },
        ],
        data: [],
      },
    }
  },
  methods: {
    unHandleBackviewSearchStartTimeChange: function() {},
    unHandleBackviewSearchEndTimeChange: function() {},
    unHandleInterviewSearchStartTimeChange: function() {},
    unHandleInterviewSearchEndTimeChange: function() {},
    unHandleBackviewPageSearch: function(changedPage) {
      //换页
      this.$data.tableUnHandleBackview.page = changedPage
      this.http
        .get({
          url: '/statisticsInfo/todayUnHandleBackview/list', //ajax
          param: {
            page: this.$data.tableUnHandleBackview.page,
            size: this.$data.tableUnHandleBackview.size,
          },
        })
        .then((data) => {
          var POJOList = new Array()
          data.reservationBackviewAndNamePOJOS.forEach(
            (reservationBackviewAndNamePOJO) => {
              //外层循环
              let userList = JSON.parse(localStorage.getItem('USER_LIST'))
              let autorName = null
              let stageName = null
              if (reservationBackviewAndNamePOJO.stageId == 1) {
                stageName = '线索阶段'
              }
              if (reservationBackviewAndNamePOJO.stageId == 2) {
                stageName = '到访阶段'
              }
              if (reservationBackviewAndNamePOJO.stageId == 3) {
                stageName = '试听阶段'
              }
              if (reservationBackviewAndNamePOJO.stageId == 4) {
                stageName = '报名阶段'
              }
              userList.forEach((user) => {
                if (user.userId == reservationBackviewAndNamePOJO.autor) {
                  autorName = user.nickName
                }
              })
              let POJO = {
                name: reservationBackviewAndNamePOJO.name,
                datetime: reservationBackviewAndNamePOJO.datetime,
                autor: autorName,
                stageId: stageName,
              }
              POJOList.push(POJO)
            }
          ) //外层循环

          this.$data.tableUnHandleBackview.page = data.page
          this.$data.tableUnHandleBackview.size = data.size
          this.$data.tableUnHandleBackview.totolCount = data.totalCount
          this.$data.tableUnHandleBackview.totalPage = data.totalPage
          this.$data.tableUnHandleBackview.data = POJOList
        })
    },
    unHandleBackviewChangeSize: function(changeSize) {
      //今日未回访,size change
      console.log(this.$data.tableUnHandleBackview)
      this.$data.tableUnHandleBackview = changeSize
    },
    unHandleInterviewPageSearch: function(changedPage) {
      this.$data.tableUnHandleInterview.page = changedPage

      this.http
        .get({
          url: '/statisticsInfo/todayUnHandleInterview/list', //ajax
          param: {
            page: this.$data.tableUnHandleInterview.page,
            size: this.$data.tableUnHandleInterview.size,
          },
        })
        .then((data) => {
          var POJOList = new Array()

          data.reservationBackviewAndNamePOJOS.forEach(
            (reservationBackviewAndNamePOJO) => {
              //外层循环
              let userList = JSON.parse(localStorage.getItem('USER_LIST'))
              let autorName = null

              userList.forEach((user) => {
                if (user.userId == reservationBackviewAndNamePOJO.autor) {
                  autorName = user.nickName
                }
              })
              let POJO = {
                name: reservationBackviewAndNamePOJO.name,
                datetime: reservationBackviewAndNamePOJO.datetime,
                autor: autorName,
              }
              POJOList.push(POJO)
            }
          ) //外层循环

          this.$data.tableUnHandleInterview.page = data.page
          this.$data.tableUnHandleInterview.size = data.size
          this.$data.tableUnHandleInterview.totolCount = data.totalCount
          this.$data.tableUnHandleInterview.totalPage = data.totalPage
          this.$data.tableUnHandleInterview.data = POJOList
        })
    },
    unHandleInterviewChangeSize: function(changeSize) {
      this.$data.tableUnHandleInterview = changeSize
    },
    showPersonDetail: function(row) {
      this.$router.push({
        name: 'student_detail',
        params: {
          row,
        },
      })
    },
    init: function() {
      this.$data.table1.page = 1
      this.$data.table2.page = 1
      this.search()
      this.searchBackview()
    },
    search: function() {
      let statisticStartTime = this.$data.statisticStartTime
      let statisticEndTime = this.$data.statisticEndTime
      if (statisticStartTime == '') {
        statisticStartTime = null
      }

      if (statisticEndTime == '') {
        statisticEndTime = null
      }
      let param = {
        page: this.$data.table1.page,
        size: this.$data.table1.size,
        searchStartTime: statisticStartTime,
        searchEndTime: statisticEndTime,
      }
      this.http
        .get({
          url: '/statisticsInfo',
          param: param,
        })
        .then((data) => {
          var POJOList = []
          data.statisticsReturnPOJOList.forEach((statisticsReturnPOJOList) => {
            let POJO = {
              nickname: statisticsReturnPOJOList.userNickname,
              resourcecount:
                statisticsReturnPOJOList.statisticsInfoPOJO.resourceCount,
              reservationinterview:
                statisticsReturnPOJOList.statisticsInfoPOJO
                  .reservationInterviewCount,
              interviewcount:
                statisticsReturnPOJOList.statisticsInfoPOJO.interviewCount,
              validinterview:
                statisticsReturnPOJOList.statisticsInfoPOJO.validInterviewCount,
              trycount: statisticsReturnPOJOList.statisticsInfoPOJO.tryCount,
              baomingcount:
                statisticsReturnPOJOList.statisticsInfoPOJO.baomingCount,
              backviewcount:
                statisticsReturnPOJOList.statisticsInfoPOJO.backviewCount,
            }
            POJOList.push(POJO)
          })
          ;(this.$data.table1.page = data.page),
            (this.$data.table1.size = data.size),
            (this.$data.table1.totalCount = data.totalCount),
            (this.$data.table1.totalPage = data.totalPage),
            (this.$data.table1.data = POJOList)
        })
    },
    pageSearch: function(changedPage) {
      this.$data.table1.page = changedPage
      this.search()
      this.$data.table2.page = changedPage
      this.searchBackview()
    },
    changeSize: function(changeSize) {
      this.$data.table1.size = changeSize
      this.search()
      this.$data.table2.size = changeSize
      this.searchBackview()
    },
    searchBackview: function() {
      let table2StartTime = this.$data.table2StartTime
      let table2EndTime = this.$data.table2EndTime
      if (table2StartTime == '') {
        table2StartTime = null
      }

      if (table2EndTime == '') {
        table2EndTime = null
      }
      let param = {
        page: this.$data.table2.page,
        size: this.$data.table2.size,
        searchStartTime: table2StartTime,
        searchEndTime: table2EndTime,
      }
      this.http
        .get({
          url: '/statisticsInfo/unHandleBackview',
          param: param,
        })
        .then((data) => {
          var POJOList = []
          data.backviewAndNamePOJOList.forEach((backviewAndNamePOJOList) => {
            let POJO = {
              studentname: backviewAndNamePOJOList.name,
              autor: backviewAndNamePOJOList.autor,
              datetime: backviewAndNamePOJOList.dateTime,
              method: backviewAndNamePOJOList.method,
              des: backviewAndNamePOJOList.des,
              studentId: backviewAndNamePOJOList.studentId,
            }
            POJOList.push(POJO)
          })
          ;(this.$data.table2.page = data.page),
            (this.$data.table2.size = data.size),
            (this.$data.table2.totalCount = data.totalCount),
            (this.$data.table2.totalPage = data.totalPage),
            (this.$data.table2.data = POJOList)
        })
    },
    statisticStartTimechange(startDatetime) {
      this.statisticStartTime = startDatetime
    },
    statisticEndTimechange(endDatetime) {
      this.statisticEndTime = endDatetime
    },
    table2StartTimechange(datetime1) {
      this.table2StartTime = datetime1
    },
    table2EndTimechange(datetime2) {
      this.table2EndTime = datetime2
    },
  },
  created: function() {
    this.$data.tableUnHandleBackview.page = 1
    this.http
      .get({
        url: '/statisticsInfo/todayUnHandleBackview/list', //ajax
        param: {
          page: this.$data.tableUnHandleBackview.page,
          size: this.$data.tableUnHandleBackview.size,
        },
      })
      .then((data) => {
        var POJOList = new Array()

        data.reservationBackviewAndNamePOJOS.forEach(
          (reservationBackviewAndNamePOJO) => {
            //外层循环
            let userList = JSON.parse(localStorage.getItem('USER_LIST'))
            let autorName = null
            let stageName = null
            if (reservationBackviewAndNamePOJO.stageId == 1) {
              stageName = '线索阶段'
            }
            if (reservationBackviewAndNamePOJO.stageId == 2) {
              stageName = '到访阶段'
            }
            if (reservationBackviewAndNamePOJO.stageId == 3) {
              stageName = '试听阶段'
            }
            if (reservationBackviewAndNamePOJO.stageId == 4) {
              stageName = '报名阶段'
            }
            userList.forEach((user) => {
              if (user.userId == reservationBackviewAndNamePOJO.autor) {
                autorName = user.nickName
              }
            })
            let POJO = {
              name: reservationBackviewAndNamePOJO.name,
              datetime: reservationBackviewAndNamePOJO.datetime,
              autor: autorName,
              stageId: stageName,
            }
            POJOList.push(POJO)
          }
        ) //外层循环

        this.$data.tableUnHandleBackview.page = data.page
        this.$data.tableUnHandleBackview.size = data.size
        this.$data.tableUnHandleBackview.totolCount = data.totalCount
        this.$data.tableUnHandleBackview.totalPage = data.totalPage
        this.$data.tableUnHandleBackview.data = POJOList
      })

    this.$data.tableUnHandleInterview.page = 1

    this.http
      .get({
        url: '/statisticsInfo/todayUnHandleInterview/list', //ajax
        param: {
          page: this.$data.tableUnHandleInterview.page,
          size: this.$data.tableUnHandleInterview.size,
        },
      })
      .then((data) => {
        var POJOList = new Array()

        data.reservationBackviewAndNamePOJOS.forEach(
          (reservationBackviewAndNamePOJO) => {
            //外层循环
            let userList = JSON.parse(localStorage.getItem('USER_LIST'))
            let autorName = null

            userList.forEach((user) => {
              if (user.userId == reservationBackviewAndNamePOJO.autor) {
                autorName = user.nickName
              }
            })
            let POJO = {
              name: reservationBackviewAndNamePOJO.name,
              datetime: reservationBackviewAndNamePOJO.datetime,
              autor: autorName,
            }
            POJOList.push(POJO)
          }
        ) //外层循环

        this.$data.tableUnHandleInterview.page = data.page
        this.$data.tableUnHandleInterview.size = data.size
        this.$data.tableUnHandleInterview.totolCount = data.totalCount
        this.$data.tableUnHandleInterview.totalPage = data.totalPage
        this.$data.tableUnHandleInterview.data = POJOList
      })

    this.init()
  },
}
</script>

<style scoped>
.to {
  padding: 10px 10px 0 30px;
}
</style>
